<!-- ajax layout which only needs content area -->
<div class="row">
  <div class="col-xs-12 form-btn-wrapper">
    <!-- PAGE CONTENT BEGINS -->
    <div class="form-horizontal" role="form">


      <!-- 状态 -->
      <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="status" data-i18n="Status"></label>
        <div class="col-sm-9">
          <label>
            <input id="status" class="ace ace-switch ace-switch-6" type="checkbox" />
            <span class="lbl"></span>
          </label>
        </div>
      </div>

      <div id="status-sets">

        <!-- 连接状态 -->
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" data-i18n="Connection"></label>
          <div class="col-sm-9 form-right-text">
            <span id="con_status"></span>
          </div>
        </div>
        <!-- 账户信息 -->
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" data-i18n="Account Info"></label>
          <div class="col-sm-9 form-right-text">
            <span id="username"></span>
          </div>
        </div>
        <!-- 服务级别 -->
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" data-i18n="Service Level"></label>
          <div class="col-sm-9 form-right-text">
            <span id="type"></span>
          </div>
        </div>
        <!-- 公网IP -->
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" data-i18n="Public IP"></label>
          <div class="col-sm-9 form-right-text">
            <span id="ip"></span>
          </div>
        </div>
        <!-- 域名列表 -->
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" data-i18n="Domain Table"></label>
          <div class="col-sm-9">
            <table id="domain-grid-table"></table>
            <div id="domain-grid-pager"></div>
          </div>
        </div>

        <!-- 账号 -->
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" for="account" data-i18n="Account"></label>
          <div class="col-sm-9">
            <div class="clearfix">
              <input type="text" id="account" class="col-xs-10 col-sm-5" maxlength="128" />
            </div>
          </div>
        </div>

        <!-- 密码 -->
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" for="password" data-i18n="Password"></label>
          <div class="col-sm-9">
            <span class="input-icon input-icon-right input-icon-form col-xs-10 col-sm-5">
              <input type="password" id="password" maxlength="128" autocomplete="new-password" />
              <i class="ace-icon fa fa-eye-slash" id="password-icon"></i>
            </span>
          </div>
        </div>

      </div><!--statusSets-->


      <div class="clearfix form-actions">
        <div class="col-md-offset-3 col-md-9">
          <button class="btn btn-second" type="button" id="refresh"><span data-i18n="Refresh"></span></button>
          &nbsp; &nbsp; &nbsp;
          <button class="btn btn-main" type="button" id="apply"><span data-i18n="Apply"></span></button>
        </div>
      </div>



    </div>
    <!-- PAGE CONTENT ENDS -->
  </div><!-- /.col -->
</div><!-- /.row -->



<!-- page specific plugin scripts -->
<script type="text/javascript">
(function () {
  /* get the object */
  var cfg;
  var info;
  var obj = "ddns@phddns";
  var index = location.hash.indexOf("obj=");
  if ( index > 0 )
  {
      obj = location.hash.substring( index+4 );
  }
  var langjson = base64.decode( page.param( 'lang', location.hash ) );
  var domain_table = '#domain-grid-table';
  var domain_pager = '#domain-grid-pager';
  /* load the configure on the input */
  function cfg_load()
  {
      he.load( [ obj ] ).then( function(v){
          cfg = v[0];
          if ( !cfg )
          {
              return;
          }
          $('#status').prop('checked', able2boole( cfg.status ) );

          $('#account').val( cfg.account );
          $('#password').val( cfg.password );
        
          $('#status').unbind('change').change(function () {
              if ($(this).prop('checked'))
              {
                  $('#status-sets').show();
              }
              else
              {
                  $('#status-sets').hide();
              }
          }).trigger('change');
      });
  }
  /* load the configure on the input */
  function status_load()
  {
    he.bkload( [ obj+'.status' ] ).then( function(v){
      info = v[0];
      if ( !info )
      {
          return;
      }
      /* status end btn */
      if ( info.status )
      {
          $("#con_status").text( $.i18n(info.status) );
      }
      else
      {
          $("#con_status").text( $.i18n("down") );
      }
      var typeMap =
      {
        0: $.i18n('Standard Level'),
        1: $.i18n('Professional Level'),
        2: $.i18n('Bussiness Level')
      }
      var getResult = function (result)
      {
        if (!result)
        {
            return ''
        }
        else if (result == '4')
        {
            return $.i18n('Online')
        }
        else if (result == 0x102 )
        {
            return $.i18n('Login Failed')
        }
        else if ((result >= 0 ) && ( result < 0x100 ) )
        {
            return $.i18n('Connecting')
        }
        else
        {
            return $.i18n('Offline')
        }
      }
      $('#con_status').text( getResult( info.result ) );
      $('#type').text(typeMap[ info.type] );
      $('#username').text( info.userid );
      $('#ip').text(info.ip);

      // 更新表格
      var rows = [];
      var i = 1;
      for (var key in info.domains)
      {
        var domain = {};
        domain.index = i++;
        domain.domain = info.domains[key];
        rows.push(domain);
      }
      $(domain_table).jqGrid('clearGridData').jqGrid('setGridParam', {
        data: rows
      }).trigger('reloadGrid');
    });
  }
  /* save the configure */
  function cfg_save()
  {
      if ( cfg == null )
      {
          return;
      }
      var cfgcopy = JSON.parse(JSON.stringify(cfg));;

      cfg.status = boole2able($('#status').prop('checked'));
      if ( cfg.status == "enable" )
      {
          cfg.account = $('#account').val();
          cfg.password = $('#password').val();
      }

      if ( ocompare( cfg, cfgcopy ) )
      {
          page.alert( { message: $.i18n('Settings unchanged') } );
          return;
      }
      he.save( [ obj+"="+JSON.stringify(cfg) ] ).then( function(){
          page.hint2succeed( $.i18n('Modify successfully') );
          cfg_load();
          status_load();
      });
  }


  /* init */
  page.password('password', 'password-icon' );
  $.i18n().load( page.lang(langjson) ).then( function () {
      /* init the langauage */
      $.i18n().locale = lang; $('body').i18n();
      /* init the table */
      jqtable.create( domain_table, domain_pager,
        {
            caption: " ",
            multiselect: false,
            hideRowList: true,
            rowNum: 10000,
            pgbuttons : false,
            pginput : false,
            colNames: [ $.i18n('Number'), $.i18n('Name') ],
            colModel: [
                {
                    name:'index', width:100,
                },
                {
                    name: 'domain', width: 300,
                },
            ]
        }
      );

      /* load the configure */
      cfg_load();
      status_load();

      // 设置定时器
      page.timing({
        refresh: function ()
        {
            status_load()
        },
        interval: 5000
      });

      /* bind the refresh */
      $('#refresh').on(ace.click_event, function () {
          location.reload();
      });
      /* bind the apply */
      $('#apply').on(ace.click_event, function () {
          cfg_save();
      });
  });

})();
</script>
<!-- page specific plugin scripts -->

